<template>
  <div class="page">
<!--    <headerbar>{{pageTitle}}</headerbar>-->
    <headerbar>示范点线上观摩</headerbar>
    <section class="frame-content-sub no-bg list-news-img-icon">
      <cube-scroll
        ref="scroll"
        :options="options"
        @pulling-up="onPullingUp"
        @pulling-down="onPullingDown"
      >
        <div class="item" @click="goDetail(item)" v-for="(item,index) in list" :key="'m' + index">
          <div class="img">
            <img v-if="!item.listPic" src="../../../../../static/images/user_bg.jpg" alt="">
            <img v-if="item.listPic" :src="tools.getImgUrl(item.listPic,true)" alt="">
          </div>
          <div class="cont">
            <h2 class="title">{{item.groupName}}</h2>
            <div class="ft">
              <div class="look"><i class="icon"><img src="../../../../../static/images/dangjian/home/workingTrends/views.png"
                                                     alt=""></i>{{item.views}}</div>
              <!--<div class="look"><i class="icon"><img src="../../../../../static/images/dangjian/home/workingTrends/msg.png"
                                                     alt=""></i>{{item.views}}</div>-->
              <div class="look"><i class="icon"><img src="../../../../../static/images/dangjian/home/workingTrends/up.png"
                                                     alt=""></i>{{item.ups}}</div>
            </div>
          </div>
        </div>
        <fetchData :loading="isLoading" :data="list"></fetchData>
        <noData :data="list" v-if="!isLoading && list.length===0" :loading="isLoading"></noData>
      </cube-scroll>
    </section>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        pageTitle: '',
        groupInfoClickData: 0,
        pageIndex: 1,
        pageSize: 10,
        menuId: '',
        isLoading: true,
        menuList: [],
        list: [{}],
        topList: [],
        recommend: [],
        options: {
          pullUpLoad: true,
          pullDownRefresh: {
            txt: ' '
          },
          scrollbar: false
        }
      }
    },
    created () {
      this.init()
    },
    methods: {
      init () {
        this.pageTitle = this.$route.query.title || '更多'
        this.fetchList()
      },
      goDetail (item) {
        this.$router.push({name: 'demoObserve', query: {partyGroupId: item.groupId, groupName: item.groupName, dgwName: item.dgwName, isRecommendNow: '1',currRecommend:item.currRecommend,isOnclick:false}})
        // this.$router.push({name: 'demoHonor', query: {partyGroupId: item.groupId, groupName: item.groupName, dgwName: item.dgwName, isRecommendNow: item.isRecommendNow}})
      },
      fetchList () {
        let dgwId = this.$route.query.dgwId.substr(0, 6)
        let params = {
          "dgwId": dgwId,
          "pageNo": this.pageIndex,
          "pageSize": this.pageSize
        }
        this.isLoading = true
        return this.fetchService.recommendRecordQueryByDgwId(params).then(res => {
          this.isLoading = false
          if (res.code !== 0) {
            return this.tools.tip(res.message)
          }
          this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate(true, false)
          if (this.pageIndex === 1) {
            this.list = []
          }
          this.pageIndex ++
          this.list = this.list.concat(res.data)
          return this.list
        })
      },
      onPullingDown () {
        console.log('onPullingDown')
        this.pageIndex = 1
        this.list = []
        this.fetchList()
      },
      onPullingUp () {
        this.fetchList().then(res => {
          setTimeout(() => {
            this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate(true, false)
            this.options.isPullUpLoad = false
          }, 100)
        })
      }
    }
  }
</script>

<style scoped>

</style>
